---
title: Thanh Điều Hướng
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Hiển thị một thanh điều hướng chứa nhiều thành phần `NavigationBarItem`.

<Tabs>
<Tab title="Usage">

```jsx
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";

export const MyComponent = () => {

   const navigationItems = [
     {
       name: "Home",
       Icon: IconHome,
       onClick: () => console.log("Home clicked"),
     },
     {
       name: "Profile",
       Icon: IconUser,
       onClick: () => console.log("Profile clicked"),
     },
     {
       name: "Settings",
       Icon: IconSettings,
       onClick: () => console.log("Settings clicked"),
     },
   ];

  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính             | Loại   | Mô tả                                                                                                                                                                                                        |
| ---------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Tên Mục Đang Hoạt Động | string | Tên của mục điều hướng đang hoạt động hiện tại                                                                                                                                                               |
| Mục                    | mảng   | Một mảng các đối tượng đại diện cho mỗi mục điều hướng. Mỗi đối tượng chứa `name` của mục, thành phần `Icon` để hiển thị và một hàm `onClick` để được gọi khi mục được chọn. |

</Tab>
</Tabs>
